<template>
    <div class="layout-container">
        <!-- 子路由出口 -->
        <router-view />
        <!-- 子路由出口 -->

        <!-- 底部标签导航栏 -->
        <van-tabbar route active-color="#009688" :placeholder="true" fixed>
            <van-tabbar-item replace to="/home">
                <span>首页</span>
                <template #icon>
                    <i class="toutiao toutiao-shouye"/>
                </template>
            </van-tabbar-item>
            <van-tabbar-item replace to="/question">
                <span>问答</span>
                <template #icon>
                    <i class="toutiao toutiao-wenda" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item replace to="/video">
                <span>视频</span>
                <template #icon>
                    <i class="toutiao toutiao-shipin" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item replace to="/info">
                <span>{{ loginInfo }}</span>
                <template #icon>
                    <i class="toutiao toutiao-wode" />
                </template>
            </van-tabbar-item>
        </van-tabbar>
        <!-- 底部标签导航栏 -->
    </div>
</template>
<script>
export default {
    data () {
        return {
        };
    },
    created () {
        this.$store.dispatch('getUser');
    },
    computed: {
        loginInfo () {
            return this.$store.state.userToken ? '我的' : '未登录';
        }
    }
};
</script>
<style lang="less" scoped>
.layout-container {
    height: 100%;
}
</style>
